<template>
  <div class="lx_changepwd">
    <!-- 导航栏 -->
    <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 请输入旧密码 -->
    <div class="lx_oldpwd">
      <van-field
        v-model="oldpassword"
        :type="showPassword ? 'text' : 'password'"
        label="旧密码"
        :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
        @click-right-icon="oldtogglePasswordVisibility"
        placeholder="请输入旧密码"
      />
    </div>

    <!-- 请输入新密码 -->
    <div class="lx_oldpwd">
      <van-field
        v-model="newpassword"
        :type="showPassword ? 'text' : 'password'"
        label="新密码"
        :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
        @click-right-icon="togglePasswordVisibility"
        placeholder="请输入新密码"
      />
    </div>
    <!-- 再次输入新密码 -->

    <div class="lx_oldpwd">
      <van-field
        v-model="repassword"
        :type="showPassword ? 'text' : 'password'"
        label="再次输入密码"
        :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
        @click-right-icon="togglePasswordVisibility"
        placeholder="再次输入新密码"
      />
    </div>

    <!-- 确认修改 -->
    <div class="lx_rebtn" @click="changepwd">确认修改</div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios'
import { ref } from 'vue'
let user = JSON.parse(localStorage.getItem('user') || '{}')
let id = user._id

const onClickLeft = () => history.back()
const oldpassword = ref('')
const newpassword = ref('')
const repassword = ref('')
const showPassword = ref(false)
const oldtogglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
const changepwd = async () => {
  console.log(12314231312);
  
  await axios.post('http://localhost:3000/lx/changepwd', { id: id, newpwd: newpassword.value }).then((res) => {
    alert('修改成功')
    router.push('/mine')
  })
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.lx_changepwd {
  width: 100vw;
  height: 100vh;
  background: #f4f6f9;
}

.lx_oldpwd {
  margin-top: 20px;
  padding: 0 15px;
}

.lx_rebtn {
  width: 350px;
  height: 50px;
  background: #4a73ff;
  color: #fff;
  line-height: 50px;
  text-align: center;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 10px;
}
</style>
